<template>
    <div class="detail-view has-header">
        <banner title="每天看点好内容"></banner>
        <template v-if="!showLoading">
            <div class="info">
                <h2 class="tit">{{eventItem.title}}
                    <span class="badge">{{eventItem.loc_name}}</span>
                </h2>
                <div class="poster">
                    <img :src="eventItem.image_hlarge" alt="海报" />
                </div>
                <div class="detail">
                    <span>时间：</span>
                    <ul>
                        <li>{{eventItem.begin_time}}</li>
                        <li>{{eventItem.end_time}}</li>
                    </ul>
                </div>
                <div class="detail">
                    <span>地点：</span>
                    <ul>
                        <li>{{eventItem.address}}</li>
                    </ul>
                </div>
                <div class="detail">
                    <span>费用：</span>
                    <ul>
                        <li>{{eventItem.fee_str}}</li>
                    </ul>
                </div>
                <div class="detail">
                    <span>类型：</span>
                    <ul>
                        <li>旅游</li>
                    </ul>
                </div>
                <div class="detail">
                    <span>起始时间：</span>
                    <ul>
                        <li>{{eventItem.time_str}}</li>
                    </ul>
                </div>
                <div class="tag" v-if="eventItem.tags">
                    <ul>
                        <li v-for="(tag, index) in tags" :key="index"><a href="#">{{tag}}</a></li>
                    </ul>
                </div>
                <div class="describe">
                    <h2>活动详情</h2>
                    <div v-if="eventItem.content" class="content" v-html="content">

                    </div>
                </div>
            </div>
            <DownloadApp></DownloadApp>
        </template>
        <template v-else>
            <loading></loading>
        </template>
    </div>
</template>

<script>
import Banner from '../components/Banner'
import Loading from '../components/Loading'
import DownloadApp from '../components/DownloadApp'
import {mapState} from 'vuex'

export default {
    name: 'DetailView',
    components: {
        Banner, Loading, DownloadApp
    },
    data(){
        return {
            showLoading: true
        }
    },
    computed: {
        ...mapState({
            eventItem: state => state.activities.eventItem
        }),
        tags: function(){
            return this.eventItem.tags.split(',')
        },
        content: function(){
            return this.eventItem.content.replace(/<img .*?>/g, '');
        }
    },
    created () {
        const id = this.$route.params.id;
        console.log('DetailView', id);
        this.$store.dispatch({ // 触发vuex actions
            type: 'getSingleEvent',
            id: id
        }).then(result => {
            console.log('DetailView', result);
            console.log(this);
            this.showLoading = false
        })
    }
}
</script>

<style lang="scss" scoped>
.detail-view {
    .info {
        margin: 1rem;
        .tit {
            font-weight: 700;
            color: #000;
            margin: 2rem 0;
            .badge {
                font-size: 14px;
                background: #ff8263;
                color: #fff;
                font-weight: 700;
                padding:.1rem .5rem;
                border-radius: .2rem;
            }
        }
        .poster {
            text-align: center;
            margin: 2rem 0;

            img {
                width: 100%;
                max-width: 22rem;
                height: auto;
            }
        }
        .detail {
            margin-bottom: .5rem;
            overflow: hidden;
            clear: both;
            font-size: 1.4rem;
            span {
                float: left;
                margin-right: 0.5rem;
                color: #999;
            }
            ul {
                overflow: hidden;
            }
        }
        .tag {
            li {
                display: inline-block;
                margin: 1rem 1rem 0 0;
                font-size: 1.5rem;
                text-align: center;

                a {
                    display: block;
                    padding: 0 1.2rem;
                    color: #494949;
                    background: #f5f5f5;
                    border-radius: 2rem;
                    line-height: 2rem;
                }
            }
        }
        .describe {
            h2 {
                color: #072;
                font-weight: 700;
                margin: 2rem 0;
            }
            .content {
                overflow: hidden;
                font-size: 1.4rem;
            }
        }
    }
}
</style>
